<template>
  <div class="pay">
    <div class="top_title">
      请选择充值额度
    </div>

    <div class="List">

      <div class="Item">
        <div class="title">
          充值账户：
        </div>
        <div class="content">
          香奶喵 ʕ•ﻌ•ʔ
        </div>
      </div>
      <div class="Border"></div>

      <div class="Item">
        <div class="title">
          剩余额度：
        </div>
        <div class="content">
          尚未开通超猩卡
        </div>
      </div>
      <div class="Border"></div>

      <div class="Item">
        <div class="title">
          充值额度：
        </div>
        <div class="content">

        </div>
      </div>
      <div class="Border"></div>

      <div class="ed">

        <div class="ed_son">
          <div class="ed_grandson" style="border-radius: 3px;">
            <div class="ed_grandson_son">
              <div style="font-size: 19px; line-height: 22px; color: #e61b64; font-weight: 900;">
                500元
              </div>
              <div style="font-size: 12px; line-height: 15px; color: #e61b64; font-weight: 100;">
                到账: 500元
              </div>
            </div>
          </div>
        </div>

        <div class="ed_son">
          <div class="ed_grandson" style="border-radius: 3px;">
            <div class="ed_grandson_son">
              <div style="font-size: 19px; line-height: 22px; color: #e61b64; font-weight: 900;">
                2000元
              </div>
              <div style="font-size: 12px; line-height: 15px; color: #e61b64; font-weight: 100;">
                到账: 2100元
              </div>
            </div>
          </div>
        </div>

        <div class="ed_son">
          <div class="ed_grandson" style="border-radius: 3px;">
            <div class="ed_grandson_son">
              <div style="font-size: 19px; line-height: 22px; color: #e61b64; font-weight: 900;">
                5000元
              </div>
              <div style="font-size: 12px; line-height: 15px; color: #e61b64; font-weight: 100;">
                到账: 5500元
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="Becareful">
      注：充值余额，可与代金券同时使用；可支付所有类型课程，但私教类、CAMP训练营类课程无折扣；可申请提现，但赠送金额及超猩卡已有数据将被清零；不支持余额转移。
    </div>
  </div>
</template>

<style lang="less" scoped>
  @subject:#e61b64;
  .pay {
    height: 100%;
     background: #262626;
   }
  .top_title {
    color: #ddd;
    height: 0.44rem;
    font-weight: 900;
    font-size: 0.16rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #333;
  }
  .List {
    background: #262626;
  }
  .Item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 0.51rem;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .title {
    font-size: 0.15rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding-left: 0.07rem;
    color: #cbcbcb;
    padding-right: 0.1rem;
    min-height: 0.3rem;
    -ms-flex-align: center;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .content {
    padding-right: 0.07rem;
    color: #ddd;
    /*white-space: pre-wrap;*/
    overflow: hidden;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    -ms-flex-align: center;
    font-size: 0.15rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }
  .Border {
    height: 1px;
    margin-left: 0.07rem;
    background-color: #333;
    margin-right: 0.07rem;
  }

  .Becareful {
    margin: 0.17rem 0.18rem 0.2rem;
    text-align: center;
    font-size: 0.11rem;
    color: #8c8c8c;
    line-height: 0.17rem;
    word-wrap: normal;
    word-break: normal;
  }

  .ed_son:not(:first-child):not(:last-child) {
    margin-left: 0.15rem;
    margin-right: 0.15rem;
  }

  .ed {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 0.2rem;
    margin-left: 0.07rem;
    margin-right: 0.07rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    .ed_son {
      height: 0.64rem;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      min-width: 0.8rem;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;

      div.ed_grandson {
        font-family: DINPro-Regular,sans-serif;
        border: 1px solid;
        color: @subject;
        background-image: none;
        border-color: @subject;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        width: 100%;
        font-size: 0.17rem;
        box-sizing: border-box;
        font-weight: 500;
      }

      div.ed_grandson_son {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
      }

    }
  }
</style>
